<template>
  <view class="pk-input flex-row" :size="['pk-input-'+size]">
    <view class="flex-row align-items-center pk-input-info">
      <view class="pk-input-suffix">
        <slot name="suffix" />
      </view>
      <view class="pk-input-content">
        <input class="pk-input-input" :placeholder="placeholder" placeholder-class="placeholderclass" v-model="inputtext"/>
      </view>
      <view class="pk-input-prefix">
        <slot name="prefix" />
      </view>
    </view>
    <view class="pk-input-searchbtn" @click="handerSearch" v-if="isBtn">
      搜索
    </view>
  </view>
</template>

<script setup>
import { defineProps, defineEmits, computed, ref } from 'vue';
const emit = defineEmits(['update:modelValue', 'change'])
const props = defineProps({
  size:{
    type:String,
    default: 'default'
  },
  circle: {
    type: Boolean,
    default: false
  },
  modelValue:{
    type: String,
    default: ''
  },
  placeholder:{
    type:String,
    default: '请输入'
  },
  isBtn:{
    type: Boolean,
    default: false
  }
})
const inputtext = computed({
  set(val) {
    emit("update:modelValue", val);
  },
  get() {
      return props.modelValue;
  },
});

const handerSearch = () => {
  emit("change");
}

</script>

<style lang="scss" scoped>
::v-deep .placeholderclass{
  font-size: 28rpx!important;
}
.pk-input{
  border:#dadbde 1px solid;
  border-radius: 12rpx; 
  background-color: #ffffff;
  display:flex;
  &-default {
    font-size: 24rpx; 
  }
  &-info{
    padding: 8rpx 24rpx;
    flex: 1
  }
  &-input{
    height: 80rpx;
  }
  &-content{
    flex: 1
  }
  &-suffix {
    margin-right: 12rpx;
    width: 44rpx;
    height: 44rpx;
    border-radius: 44rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  &-searchbtn{
    color: #fff;
    font-weight: bold;
    background: #00b4b3;
    padding: 0 48rpx;
    border-radius: 0 12rpx 12rpx 0;
    margin: 0 -1px -1px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
}


</style>